<template>
  <div>
      <h3>留言板</h3>
      <div v-if="list.length == 0">暂无留言内容</div>
      <ol>
          <!-- <li>一起去土耳其</li>
          <li>咖喱咖喱</li>
          <li>勇气</li> -->
          <li v-for="(val,index) in list" :key="'list_'+index">
              {{val}} &nbsp;&nbsp;
              <a href="#" @click.prevent="delMsg(index)">删除</a>
          </li>
      </ol>
      <hr>
      <textarea cols="30" rows="10" v-model="liuyan"></textarea>
      <br>
      <button @click="addMsg">发布留言</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            //1.是留言列表，所以选择用数组
            list:[
                '一起去土耳其',
                '咖喱咖喱',
                '勇气'
            ],
            liuyan:""  //输入框的值
        }
    },
    methods:{
        // 2.删除
        delMsg(num){
            this.list.splice(num,1)   //删除索引为了num的数组元素
            //从数组中指定的下标开始删除n个元素。Vue中数据变化了，页面会自动更新（响应式的数据绑定）。
        },
        addMsg(){
            // 3.添加留言：本质就是向数组中添加一个元素
            this.list.push(this.liuyan)

        }
    }
}
</script>

<style>

</style>